<template>
    <div class="SqlIo">
       <div class="main">
           <div>
               <div id="ioRead">
                   <v-Cpuinfo ref="CPUINFO"></v-Cpuinfo>
               </div>
           </div>
           <div>
               <div id="ioWrite">
                   
                   <v-MemoryInfo ref="MEMORYINFO"></v-MemoryInfo>
               </div>
           </div>
           <div style="display:none">
               <div id="diskInfo">
                   <v-DiskInfo></v-DiskInfo>
               </div>
           </div>
       </div>

   </div>
</template>>

<script>
import { fetchData } from '@/api/index.js';
import bus from "common/bus.js";
import vCpuinfo from './Cpuinfo.vue'
import vMemoryInfo from './MemoryInfo.vue'
import vDiskInfo from './DiskInfo.vue'
export default {
    data() {
        return {
           postData: {
                opera: 'hostconnect',
                curPage: 1,
                pageSize: 2000,
                sort: {
                    sortColumn: 'monid',
                    sortOrders: 'asc'
                },
                filtersType: 'fuzzyquery',
                filters: {
                    
                },
            },
            initData:'',
            selectedMonID:''
        }
    },
    components:{
        vCpuinfo,
        vMemoryInfo,
        vDiskInfo

    },
    created() {
    this.selectedMonID = this.$store.getters["ItemMonitorALL/getItem"];
    this.initGetData();
    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });
    },
    mounted() {
      bus.$on("ItemMonitorALL", (msg) => {    
      this.selectedMonID = msg;
      this.initGetData();
    });
    },
    computed: {

    },
    methods: {
        initGetData(){
          fetchData({
                postData : JSON.stringify(this.postData)
            }).then((res) => {
                if(res){
                    this.initData = res;
                    bus.$emit('ItemMonitorInitChart',[res,this.selectedMonID])
                }
            });
        },
       
    },
    beforeDestroy() {
    bus.$off("ItemMonitorALL")
    
        
    },
   
}
</script>

<style scoped lang="scss">
.SqlIo {
    .main {
    //    display: flex;
    //    flex-direction: row;
    //    flex-wrap: wrap;
    //    justify-content: space-between;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 15px;
        &>div {
            // padding: 25px;
        }
    }
}

</style>